﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>显示网络上的天地图</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <script type="text/javascript">
        var map;
        var tiandituLayer;

        //地图初始化函数
        function init() {
            map = new ol.Map({
                target: 'mapCon',
                view: new ol.View({
                    projection: ol.proj.get('EPSG:4326'),
                    center: [110, 30],
                    maxZoom: 14,
                    minZoom: 1,
                    zoom: 4
                })
            });
            tiandituLayer = new Zondy.Map.TianDiTu({
                //图层类型
                layerType: 'vec',
                //最小显示等级
                minZoom: 0,
                //最大显示等级
                maxZoom: 15,
                //key
                token: "4c27d6e0e8a90715b23a989d42272fd8",
                //设置地图不连续显示
                noWrap: true
            });
            map.addLayer(tiandituLayer);

            var tiandituLayer2 = new Zondy.Map.TianDiTu({
                //图层类型
                layerType: 'cva',
                //最小显示等级
                minZoom: 0,
                //最大显示等级
                maxZoom: 15,
                //key
                token: "4c27d6e0e8a90715b23a989d42272fd8",
                //设置地图不连续显示
                noWrap: true
            });
            map.addLayer(tiandituLayer2);
        }
    </script>
</head>

<body onload="init()">
<div id="mapCon" style="width: 100%; height: 95%; position: absolute;">
    <div id="mouse-position" class="custom-mouse-position" style="position: absolute; z-index: 1003; height: 35px; right: 10px; bottom: 10px; width: 200px"></div>
</div>
</body>

</html>
